<template>
  <div id="bank-account-list">
    <router-link
      tag="section"
      v-for="(value, key, index) in myBanks"
      :key="index"
      :to="link + '?card=' + index">
      <p>{{ banks[value.bank] }}</p>
      <p>
        <span>****</span>
        <span>****</span>
        <span>****</span>
        {{ value.number | formatAccount }}
      </p>
      <span @click.stop="deleteBank(banks[value.bank], value.bank, value.number)" v-if="myBanks[1]"></span>
    </router-link>
    <router-link to="/new-account" tag="section">
      <div><span></span>添加银行卡</div>
    </router-link>
  </div>
</template>

<script>
  import BANK from '../../assets/scripts/BANK';
  import { MessageBox } from 'mint-ui';
  export default {
    name: "bank-account-list",
    data() {
      return {
        myBanks: [],
        banks: {},
        link: ''
      }
    },
    created() {
      this.myBanks = this.$tool.qs.parse(localStorage.getItem('account_number'));
      this.banks = BANK.total;

      this.link = this.$route.query.link || '';
    },
    methods: {
      deleteBank(bank, bankCode, bankAccount) {
        MessageBox.confirm('确认删除此 "' + bank + '" 卡？').then(action => {
          action === 'confirm' && this.$http.post({
            api: this.$api.USER_SET,
            params: {
              user_id: localStorage.getItem('id'),
              type: 5,
              data: [
                {
                  name: this.myBanks[0].name,
                  bank: bankCode,
                  number: bankAccount,
                  id_number: this.myBanks[0].id_number,
                  status: 2
                }
              ]
            },
            success: (res) => {
              // 使用localStorage存储提现账号信息

              localStorage.setItem('account_number', this.$tool.qs.stringify(res.data.data.account_number));

              // 更新 UI

              this.myBanks = this.$tool.qs.parse(localStorage.getItem('account_number'));

              MessageBox.alert('银行卡删除成功');
            }
          });
        });
      }
    }
  }
</script>

<style scoped lang="scss">

  #bank-account-list {
    >section {
      position: relative;
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      height: 11rem;
      padding: 2.3rem 0 2.6rem;
      margin: 1.5rem 1rem;
      border-radius: 12px 12px 0 0;

      &:nth-of-type(4n + 1) {
        background: #e55b63;
        background: -moz-linear-gradient(right, #e55b63, #e6517c);
        background:-webkit-gradient(linear, left 0, right 0, from(#e55b63), to(#e6517c));
      }

      &:nth-of-type(4n + 2) {
        background: #4c82bb;
        background: -moz-linear-gradient(right, #4c82bb, #3a5ea7);
        background:-webkit-gradient(linear, left 0, right 0, from(#4c82bb), to(#3a5ea7));
      }

      &:nth-of-type(4n + 3) {
        background: #19b38e;
        background: -moz-linear-gradient(right, #19b38e, #069db3);
        background:-webkit-gradient(linear, left 0, right 0, from(#19b38e), to(#069db3));
      }

      &:nth-of-type(4n + 4) {
        background: #ec9430;
        background: -moz-linear-gradient(right, #ec9430, #f7702a);
        background:-webkit-gradient(linear, left 0, right 0, from(#ec9430), to(#f7702a));
      }

      &:last-of-type {
        flex-direction: row;
        justify-content: space-around;
        align-items: center;
        background: none;
        border: 1px dashed #333;

        >div {
          display: flex;
          align-items: center;
          font-size: 1.5rem;
          color: #333;

          >span {
            display: block;
            width: 1.6rem;
            height: 1.6rem;
            margin-right: .8rem;
            background: url("../../assets/images/public/add.png") no-repeat center / $size-as-parent auto;
          }
        }
      }

      p {
        color: $white;

        &:nth-of-type(1) {
          font-size: 1.5rem;
          text-indent: 2rem;
        }

        &:nth-of-type(2) {
          display: flex;
          justify-content: space-around;
          align-items: center;
          padding: 0 8rem;
          font-size: 2.3rem;

          >span {
            font-size: 3rem;
            margin-right: 1rem;
          }
        }
      }

      >span {

        $delete-side: 2.8rem;
        $delete-padding: 1.2rem;

        position: absolute;
        right: .8rem;
        top: .8rem;
        width: $delete-side;
        height: $delete-side;
        padding: 1.2rem;
        background: url("../../assets/images/mine/icon-delete.png") no-repeat center / ($delete-side - $delete-padding) ($delete-side - $delete-padding);
      }
    }
  }
</style>
